<template>
    <div>
        <el-divider content-position="left">采购Parts操作</el-divider> 
        <el-form :inline="true" :model="formData">
            <el-form-item label="选择报价单：">
                <el-select style="width: 200px" v-model="formData.name" placeholder="请选择">
                    <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户信息："></el-form-item>
            <el-form-item label="套数："></el-form-item>
        </el-form>
        <el-tabs type="border-card">
            <el-tab-pane label="Parts">
                <div style="display: flex;">
                    <el-form style="width: 40%; margin-right: 20px;" v-model="formData">
                        <el-form-item label="器件类型:">
                            <el-select v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="器件型号:">
                            <el-select v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="物料种类:">
                            <el-select v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="单Site用量:">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="整版用量:">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="总用量:">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="MOQ:">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="单价(含税):">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="总价(含税):">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="备注:">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-form>
                    <vue-table :tableData="tableData" :tableHeade="tableHeade"></vue-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="Quotation Detail">
                <el-form>
                    <div style="display: flex; justify-content: space-around;">
                        <el-form-item label="ATE Platform：" style="margin-right: 10px;">
                            <el-select style="width: 200px" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Pitch：" style="margin-right: 10px;">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="PCB layer：" style="margin-right: 10px;">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="PCB size：">
                            <el-input v-model="formData.name" placeholder="请输入"></el-input>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label-width="100px" label="Back Drilling:">
                            <el-select style="width: 220px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Ultra-Flat Process:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label-width="100px" label="Lamination:">
                            <el-select style="width: 220px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Impedance Control+/-5%:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label-width="100px" label="Drill ratio:">
                            <el-select style="width: 220px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="laser Drill:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label-width="100px" label="采购类型:">
                            <el-select style="width: 220px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Thin Core Technology:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="flex">
                        <el-form-item label-width="100px" label="Material:">
                            <el-select style="width: 220px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Stiffener:">
                            <el-select style="width: 300px;" v-model="formData.name" placeholder="请选择">
                                <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-form-item label="附件:" style="margin-left: 55px;">
                        <el-upload action="#" ref="upload" list-type="picture" :file-list="formData.fileList" :on-exceed="handleExceed" :auto-upload="false" class="upload-demo" :on-remove="handleRemove" :on-change="handleSuccess" :limit="1">
                            <el-button type="primary">点击上传</el-button>
                            <template #tip>
                            <div class="el-upload__tip">只可上传jpg/png/gif 且大小不可超过4M</div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <div style="width: 100%; text-align: center; margin-top: 10px;">
            <el-button type="primary" @click="save">下一步</el-button>
            <el-button @click="back">上一步</el-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import useApplicationCenterStore from '@/store/modules/applicationCenter'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { genFileId, ElMessage } from 'element-plus'
let applicationCenter = useApplicationCenterStore()

let formData = reactive({
    name: '',
    region: '',
    fileList: []
})
let options1 = [
    { value: '选项1', label: '黄金糕' },
    { value: '选项2', label: '双皮奶' },
    { value: '选项3', label: '蚵仔煎' },
    { value: '选项4', label: '龙须糖' },
    { value: '选项5', label: '北京烤鸭' }
];
const tableHeade = reactive([
  { prop: 'tmName', label: 'ID' },
  { prop: 'userNumber', label: 'QuotationID', width: '110' },
  { prop: 'userNumber', label: 'QuotationType', width: '130' },
  { prop: 'userNumber', label: 'QuotationModel', width: '140' },
  { prop: 'userNumber', label: 'MaterialCatgory', width: '140' },
  { prop: 'userNumber', label: 'SiteUsage', width: '110' },
  { prop: 'userNumber', label: 'CompleteUsage', width: '140' },
  { prop: 'userNumber', label: 'NumberOfSets', width: '140' },
  { prop: 'userNumber', label: 'SummaryUsage', width: '140' },
  { prop: 'userNumber', label: 'MOQ', width: '110' },
  { prop: 'userNumber', label: 'SimplePrice', width: '110' },
  { prop: 'userNumber', label: 'SIPIRequest', width: '110' },
  { prop: 'userNumber', label: 'SummaryPrice', width: '200' },
  { prop: 'userNumber', label: 'Remark', width: '130'},
  { prop: 'userNumber', label: 'Creater' },
  { prop: 'userNumber', label: 'CreateDate', width: '110' },
  { prop: 'userNumber', label: 'Updater', width: '110' },
  { prop: 'userNumber', label: 'UpdateDate', width: '110' }
])
let tableData = reactive([{}])
const save = () => {
    applicationCenter.active = 3
}
const back = () => {
    applicationCenter.active = 1
}
const upload = ref<UploadInstance>()
const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}
const handleSuccess = (e: any) => {
  formData.fileList[0] = e
}
const handleRemove = (e: any) => {
  formData.fileList = []
}
</script>
<style scoped lang="scss">
.itemWidth {
    width: 155px;
}
.flex {
    display: flex;
    justify-content: space-between;
}
</style>
